<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <!-- <link rel="stylesheet" href="../css/normalize.css"> -->
    <style>
        body {
            line-height: 1.5em;
            
        }

        footer {
            text-align: center;
            padding:20px 0;
            color: white;
            background-color: #1e1e1e;
        }

        h1 {
            color:#fd8407;
        }

        header {
            background-color: transparent;
            margin: 0 auto;
            width: 800px;
            /*添加阴影*/
            box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.08);
        }

        main {
            width: 800px;
            margin: 0 auto;
        } 

        .blog {
            border-radius: 15px;
            padding: 10px;
            box-shadow: 0px 14px 20px 0px rgba(0, 0, 0, 0.08);
        }

        .color-master {
            color:#fd8407;
        }

        /* .date {
            
        } */

        .cat-links>a {
            /*改变超链接的原始下划线样式 */
            text-decoration: none;
            border: 2px solid;
            border-radius: 15px;
            padding: 5px;
            color:#fd8407;
        }

        .date {
            font-size: 18px;
            font-weight: 800;
            float: right;
        }
    </style>
</head>
<body>
    <header>
        <h1>王老师的博客</h1>
        <p>吃葡萄不吐葡萄皮，不吃葡萄倒吐葡萄皮</p>
    </header>
    <main>
        <div class="blog">
            <div class="cat-links">
                <a href="">Uncategorized</a>
                <a href="">tag1</a>
                <a href="">tag2</a>
                <a href="">tag3</a>
                <a href="">tag4</a>
                <a href="">tag5</a>
            </div>
            <span class="date">June 21, 2008 </span>
            <h2>博客1</h2>
            <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus aperiam maxime perferendis necessitatibus ex veniam odit cupiditate similique! Provident rem esse tenetur tempora numquam commodi quae inventore obcaecati itaque sed.</p>
        </div>
       
        <div class="blog">
            <div class="cat-links">
                <a href="">Uncategorized</a>
            </div>
            <span class="date">June 21, 2008 </span>
        <h2>博客2</h2>
        <p>Illo voluptates dolorum nihil, consectetur officia minima id reiciendis, necessitatibus eos laboriosam ipsam odio iusto qui, atque totam ad natus blanditiis! Obcaecati libero blanditiis nam enim, optio corporis repellat iste?</p>
        </div>

        <div class="blog">
            <div class="cat-links">
                <a href="">Uncategorized</a>
            </div>
            <span class="date">June 21, 2008 </span>
        <h2>博客3</h2>
        <p>Aperiam possimus debitis cupiditate veritatis facere eaque rem corrupti non assumenda quibusdam mollitia repellendus eligendi impedit ipsa sunt sit magni sapiente, quo doloremque natus placeat ab vitae. Nulla, ex maxime.</p>
        </div>

        <div class="blog">
            <div class="cat-links">
                <a href="">Uncategorized</a>
            </div>
            <span class="date">June 21, 2008 </span>
        <h2>博客4</h2>
        <p>Sed voluptatum recusandae consequatur magni necessitatibus repellendus voluptates tempore quo saepe, numquam similique dignissimos ea atque laudantium a quasi ad assumenda temporibus quos ut quae. Molestiae libero ea nostrum distinctio.</p>
        </div>

        <div class="blog">
            <div class="cat-links">
                <a href="">Uncategorized</a>
            </div>
            <span class="date">June 21, 2008 </span>
        <h2>博客5</h2>
        <p>Quod, obcaecati vel quia illum, sequi quibusdam adipisci fuga dicta nulla sed iste maxime eaque officiis nobis. Rerum iste voluptas similique cumque laboriosam asperiores rem dolorem quam autem consequuntur? Suscipit.</p>
        </div>
    </main>
    <footer>
        Proudly powered by WordPress | Theme: Popularis Writer
    </footer>
</body>
</html>